<template>
  <div class="content">
    <el-form :inline="true" :model="queryForm" class="form-inline">
      <el-form-item label="名称">
        <el-input v-model="queryForm.name" placeholder="请输入名称" clearable />
      </el-form-item>
 
      <el-form-item>
        <el-button type="primary" @click="loadFlavorList">查询</el-button>
      </el-form-item>
    </el-form>

    <div style="margin-bottom:10px;">
      <el-button type="primary" @click="handleOpenFlavorDialog(null)">添加口味</el-button>
    </div>
    <el-table :data="flavorList" stripe>
      <el-table-column prop="name" label="名称" />

      <el-table-column label="口味" >
        <template #default="scope">
          <template v-for="item in scope.row.value">
            <el-tag type="success" style="margin-right:2px;">{{item}}</el-tag>
          </template>
        </template>
      </el-table-column>

      <el-table-column label="操作" >
        <template #default="scope">
          <el-button size="small" style="margin-left: 2px;" @click="handleOpenFlavorDialog(scope.row)">编辑</el-button>
          <el-button size="small" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>

    <div style="margin-top: 10px;">
      <el-pagination
          :page-sizes="[10, 20, 30, 40]"
          :page-size="queryForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
      />
    </div>
  </div>

  <!--用户对话框-->
  <el-dialog v-model="dialogFormVisible" :title="flavorForm.id?'编辑口味':'添加口味'">
    <el-form ref="flavorFormRef" :model="flavorForm" :rules="flavorFormRule">
      <el-form-item label="名称" prop="name">
        <el-input placeholder="请输入名称" v-model="flavorForm.name" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="口味" prop="value">

        <el-tag
            v-for="(item,index) in flavorForm.value"
            :key="item"
            closable
            type="success"
            style="margin-right:10px;"
            @close="handleClose(item)">
          {{ item }}
        </el-tag>

        <el-input
            v-if="flavorInputVisible"
            ref="InputRef"
            style="width: 90px;margin-left: 10px;vertical-align: bottom;"
            v-model="flavorInputValue"
            @keyup.enter.native="handleFlavorInputConfirm"
            @blur="handleFlavorInputConfirm"
            size="small"
        />
        <el-button v-else size="small" @click="handleShowFlavorInput">添加口味</el-button>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关&nbsp;&nbsp;闭</el-button>
        <el-button type="primary" @click="handleSave">提&nbsp;&nbsp;交</el-button>
      </span>
    </template>
  </el-dialog>


</template>

<script setup>
import { reactive, ref} from "vue";
import {getFlavorList,saveFlavor,deleteFlavorById} from  "@/api/flavor"
import {ElMessageBox,ElMessage} from "element-plus";

const queryForm=reactive({name:"",page:1,pageSize:10});
let flavorList=reactive([]);
let total=ref(0);

let flavorInputVisible=ref(false);
let flavorInputValue=ref("");

let dialogFormVisible=ref(false);
let flavorFormRef = reactive(null);
const flavorForm=reactive({id:null,name:"",value:[]});
let flavorFormRule = reactive({
  name: [
    {
      required: true,
      trigger: 'blur'
    }
  ],
  value: [
    {
      required: true,
      trigger: 'blur'
    }
  ]
})


//打开添加、编辑口味对话框
let handleOpenFlavorDialog=(flavor)=>{
  flavorForm.id=null;
  flavorForm.name=null;
  flavorForm.value=[];

  if(flavor){
    flavorForm.id=flavor.id;
    flavorForm.name=flavor.name;
    flavorForm.value=flavor.value;
  }
  dialogFormVisible.value=true;
}

let handleShowFlavorInput=()=>{
  flavorInputVisible.value = true;
}


let handleClose=(tag)=>{
  flavorForm.value.splice(flavorForm.value.indexOf(tag), 1);
}

let handleFlavorInputConfirm=()=>{
  let inputValue = flavorInputValue.value;
  if (inputValue) {
    //判断是否已经存在
    if(flavorForm.value.indexOf(inputValue)==0){
      //提示已经存在了
      ElMessage.error(inputValue+'口味已经存在了');
    }else{
      flavorForm.value.push(inputValue);
    }
  }
  flavorInputValue.value = '';
  flavorInputVisible.value = false;
}


//处理添加、编辑口味
let handleSave=()=>{
  //判断是否校验通过
  flavorFormRef.validate((valid) => {
    if (valid) {

      let param = JSON.parse(JSON.stringify(flavorForm));
      param.value = JSON.stringify(param.value);
      saveFlavor(param.id,param).then((resp) => {
        dialogFormVisible.value=false;
        loadFlavorList();
      });
    }
  });
}

//处理删除操作
let handleDelete=(flavorId)=>{
  //确认对话框
  ElMessageBox.confirm(
      "是否删除?",
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    //发送请求
    deleteFlavorById(flavorId).then(resp=>{
      loadFlavorList()
    })
  }).catch(()=>{
  })
}

//定义方法
let loadFlavorList=()=>{
  //准备数据
  getFlavorList(queryForm).then((resp)=>{
    flavorList.length = 0;

    if(resp.data){
      for(let item of resp.data){
        item.value = JSON.parse(item.value);
        flavorList.push(item);
      }
    }
    total.value=resp.total;
  });
}

let handleSizeChange=(pageSize)=>{
  queryForm.pageSize = pageSize;
  loadFlavorList()
}

let handlePageChange=(page)=>{
  queryForm.page = page;
  loadFlavorList();
}

loadFlavorList();
</script>

<style scoped>

</style>
